<template>
  <el-date-picker
    v-model="innerVal"
    ref="compRef"
    v-bind="{ ...$props }"
    :default-time="defaultTime ?? innerDefaultTime"
  >
    <template v-for="(_slot, slotName) in $slots" #[slotName]="slotProps">
      <slot :name="slotName" :key="slotName" v-bind="slotProps"></slot>
    </template>
  </el-date-picker>
</template>
<script setup lang="ts">
import { DatePickerProps } from "element-plus";
import { ElDatePickerExpose } from "./types";
import { genDateRangeShortcuts } from "./consts";

interface Props extends Partial<DatePickerProps> {}

const props = withDefaults(defineProps<Props>(), {
  editable: true,
  clearable: true,
  type: "date",
  format: "YYYY-MM-DD",
  rangeSeparator: "-",
  validateEvent: true,
  teleported: true,
  placement: "bottom",
  shortcuts: genDateRangeShortcuts,
});

const compRef = ref();
const innerVal = defineModel({ type: String });
const innerDefaultTime = computed(() => {
  if (props.type === "daterange") {
    return [
      new Date(2000, 1, 1, 0, 0, 0),
      new Date(2000, 2, 1, 23, 59, 59),
    ] as [Date, Date];
  }
});

defineExpose<ElDatePickerExpose>({
  // @ts-ignore
  instance: compRef,
});
</script>
<style lang="scss">
// 这里统一按照UI修改基础组件的样式
.el-date-picker {
  // 修改高度
  &.el-input__wrapper {
    height: 30px;
  }
}

// 重置focus的样式
.el-range-editor.is-active,
.el-range-editor.is-active:hover {
  box-shadow: 0 0 0 1px var(--el-input-border-color) inset;
}
</style>
